<template>
  <div>
    <h1>ctp基本信息</h1>
    <el-button style="float: right; padding: 3px 0" type="text" @click="getCtps">刷新</el-button>
    <el-table :data="ctps" @cell-click="handleClick">
      <el-table-column property="name" label="名称" sortable>
        <template slot-scope="scope">
          <router-link :to="{
              name:'CTPS',
              params:{
                  name:scope.row.name,
                  protocol:scope.row.layerProtocolName
              }
          }">
            {{ scope.row.name }}
            <!--            <el-button type="primary">返回</el-button>-->
          </router-link>
        </template>
      </el-table-column>
      <el-table-column width="auto" property="statePac.adminState" label="管理配置状态">
        <template slot-scope="scope">
          <div v-show="isClick2">
            <el-select v-model="scope.row.statePac.adminState" size="mini" @blur="update">
              <el-option value="是"></el-option>
              <el-option value="否"></el-option>
            </el-select>
          </div>
          <div v-show="!isClick2">
            {{ scope.row.statePac.adminState }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="auto" property="statePac.operationalState" label="工作状态"></el-table-column>
      <el-table-column width="150" property="layerProtocolName" label="协议层名称"></el-table-column>
      <el-table-column width="auto" property="portRole" label="端口角色"></el-table-column>
      <el-table-column width="auto" property="loopBack" label="环回类型">
        <template slot-scope="scope">
          <div v-show="isClick">
            <el-select v-model="scope.row.loopBack" size="mini" @blur="update">
              <el-option value="无环回"></el-option>
              <el-option value="内环回"></el-option>
              <el-option value="外环回"></el-option>
            </el-select>
          </div>
          <div v-show="!isClick">
            {{ scope.row.loopBack }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleProtocol(scope.$index, scope.row)">协议层属性
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  对话框窗口  -->
    <div>

<!--      <h2>message1:{{visibleETH}}</h2>
      <eth-ctp-popup title="ETH" :visible.sync="visibleETH" v-show="visibleETH"></eth-ctp-popup>
      <odu-ctp-popup title="ODU" :visible.sync="visibleODU" v-show="visibleODU"></odu-ctp-popup>
      <vc-ctp-popup title="SDH" :visible="visibleSDH" @update:message="visibleSDH = $event" v-show="visibleSDH"></vc-ctp-popup>-->

<!--      <el-dialog
          :visible.sync="visibleETH"
          width="1000px"
          :close-on-click-modal="false">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">ETH</div>
        </div>
        <EthCtp></EthCtp>
      </el-dialog>-->

<!--      <el-dialog
          :visible.sync="visibleODU"
          width="1000px"
          :close-on-click-modal="false">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">ODU</div>
        </div>
        <OduCtp></OduCtp>
      </el-dialog>-->

<!--      <el-dialog
          :visible.sync="visibleSDH"
          width="1000px"
          :close-on-click-modal="false">
        <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
          <div style="padding:15px 20px;">SDH</div>
        </div>
        <VcCtp></VcCtp>
      </el-dialog>-->

    </div>

  </div>
</template>

<script>
import axios from "axios";
import EthCtpPopup from "@/components/dispose/ctp/popup/EthCtpPopup";
import OduCtpPopup from "@/components/dispose/ctp/popup/OduCtpPopup";
import VcCtpPopup from "@/components/dispose/ctp/popup/VcCtpPopup";
import EthCtp from "@/components/dispose/ctp/EthCtp";

export default {
  name: "CtpGeneral",
  components: {EthCtp, EthCtpPopup,OduCtpPopup, VcCtpPopup},
  data() {
    return {

      message:'',
      //点击事件
      isClick: false,
      isClick2: false,
      row: '',
      col: '',
      tmpRow: {},

      //对话框控制弹出隐藏
      visibleETH:false,
      visibleODU:false,
      visibleSDH:false,


      nodeName: '',
      ctpName: '',
      ctps: [
        {
          name: 'ctp=1',
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          layerProtocolName: 'ETH',
          portRole: '1',
          loopBack: '无环回'
        },
        {
          name: 'ctp=2',
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          layerProtocolName: 'ODU',
          portRole: '1',
          loopBack: '有环回'
        },
        {
          name: 'ctp=3',
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          layerProtocolName: 'SDH',
          portRole: '1',
          loopBack: '外环回'
        },
        {
          name: 'ctp=4',
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          layerProtocolName: 'ETH',
          portRole: '1',
          loopBack: '内环回'
        }
      ]
    }
  },
  methods: {
    handleClick(row, column, cell, event) {
      if (column.label === '环回类型') {
        this.isClick = true;
      } else {
        this.isClick = false;
      }
      if (column.label === '管理配置状态') {
        this.isClick2 = true;
      } else {
        this.isClick2 = false;
      }
      // console.log("ctp basic")
      // console.log(row, column);
      // console.log(cell, event);
      // this.editData(row,column);
    },

    isPopUp(protocol) {
      switch (protocol) {
        case 'ETH':
          this.visibleETH = true;
          this.visibleODU = false;
          this.visibleSDH = false;
          this.$bus.$emit('visible:eth:dialog',this.visibleETH);
          break;
        case 'ODU':
          this.visibleETH = false;
          this.visibleODU = true;
          this.visibleSDH = false;
          this.$bus.$emit('visible:odu:dialog',this.visibleODU);
          break;
        case 'SDH':
          this.visibleETH = false;
          this.visibleODU = false;
          this.visibleSDH = true;
          this.$bus.$emit('visible:sdh:dialog',this.visibleSDH);
          break;
        default:
          this.visibleETH = false;
          this.visibleODU = false;
          this.visibleSDH = false;
          break;
      }
    },

    handleProtocol(index,row){
      this.isPopUp(row.layerProtocolName);

      console.log('-----------------')
      console.log('索引： ',index)
      console.log('行值： ',row)
      console.log('-----------------')
      // this.visibleETH = true;

    },

    update(){

    },

    editData(row, column) {
      this.row = row.orderId
      this.col = column.id
      this.tmpRow = row
      this.tmpRow.orderId = row.orderId
    },


    getCtps() {
      axios.get("/node/" + this.nodeName + "/ctps").then(
          response => {
            console.log("请求成功", response.data);
            this.ptps = response.data;
            // response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log('PTP - node : ', data);
      this.nodeName = data;
    })
  }
}
</script>

<style scoped>

</style>